<template>
  <!-- 基本信息 -->
  <div>
    <div class="title-wrapper">
      <title-name title="重点监管质量风险监控计划信息"></title-name>
      <a-icon
        v-if="showPlanBoardVisible"
        :type="planBoardVisible ? 'up' : 'down'"
        @click="planBoardVisible = !planBoardVisible"
      />
    </div>
    <div  v-if="planBoardVisible">
      <a-button
        :loading="exportLoading"
        class="ml12"
        type="default"
        @click="exportWord()"
        v-if="Object.keys(details).length > 0 && form.id !== ''"
      >全部导出</a-button>
      <div style="margin: 20px; margin-right: 0;" v-for="(val, key) in details" :key="key">
        <title-name :title="key"></title-name>
        <!-- 表格 -->
        <a-table bordered :data-source="val" :columns="columns" rowKey="id" size="default" style="width: 100%; overflow-x: auto;" :pagination="false">
          <!-- 验证人 -->
          <template slot="verifierId" slot-scope="text, record, index">
            <span>{{ chechEmoById(text) }}</span>
          </template>
          <!-- 检查人 -->
          <template slot="checkerId" slot-scope="text, record, index">
            <span>{{ chechEmoById(text) }}</span>
          </template>
          <!-- 检查人 -->
          <template slot="lv" slot-scope="text, record, index">
            <span>{{ text ? text : '' }}</span>
          </template>
          <template
            slot="action"
            slot-scope="text, record, index"
          >
          <a class="base-btn" v-if="record.detailId"  @click="openRecordsDetail(record)">查看质量风险记录</a>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
  
<script>
import { riskMonitorPlangetEmoById, riskMonitorPlan } from '@/api/quality/risk/monitoringPlan'
const columns = [
    {
        title: '风险名称',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
        width: 120,
    },
    {
        title: '工程部位',
        dataIndex: 'projectPosition',
        scopedSlots: { customRender: 'projectPosition' },
        width: 120,
    },
    {
        title: '监控停止点',
        dataIndex: 'monitorEndpoint',
        scopedSlots: { customRender: 'monitorEndpoint' },
        width: 120,
    },
    {
        title: '验证人',
        dataIndex: 'verifierId',
        scopedSlots: { customRender: 'verifierId' },
        width: 120,
    },
    {
        title: '检查人',
        dataIndex: 'checkerId',
        scopedSlots: { customRender: 'checkerId' },
        width: 120,
    },
    {
        title: '生效日期',
        dataIndex: 'takeEffectDate',
        scopedSlots: { customRender: 'takeEffectDate' },
        width: 120,
    },
    {
        title: '检查时限',
        dataIndex: 'timeLimit',
        scopedSlots: { customRender: 'timeLimit' },
        width: 120,
    },
    {
        title: '检查频率(天/次)',
        dataIndex: 'frequency',
        scopedSlots: { customRender: 'frequency' },
        width: 140,
    },
    {
        title: '任务完成率',
        dataIndex: 'lv',
        scopedSlots: { customRender: 'lv' },
        width: 120,
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: 150,
    },
    
]
export default {
  name: 'a' + Date.now(),
  components: {
  },
  props: {
    api: {
      type: Object,
      default: () => null
    },
    // 表单
    form: {
      type: Object,
      default: () => ({})
    },
    // 是否显示箭头
    showPlanBoardVisible: {
      type: Boolean,
      default: () => false
    },
    // 默认展开
    defaultPlanBoardVisible: {
      type: Boolean,
      default: () => true
    }
  },
  watch: {
    defaultPlanBoardVisible: {
      handler(val) {
        this.planBoardVisible = val
      },
      immediate: true,
      deep: true
    },
    'form.details': {
      handler(val) {
        if (val) {
          this.details = val

        }
      },
      immediate: true,
      deep: true
    },
    'form.projectId': {
      handler(val) {
        if (val) {
          this.riskMonitorPlangetEmoById()
        }
      },
      immediate: true,
      deep: true
    },
      
  },
  data() {
    this.columns = columns
    return {
      exportLoading: false,
      details: [],
      organizePeopleList: [],
      currentDate: new Date(),
      planBoardVisible: false
    }
  },
  created() {
  },
  methods: {
      async exportWord() {
        this.exportLoading = true
        this.api.excels(this.form.id).then(res => {
          setTimeout(() => {
            this.exportLoading = false
          })
          this.handleDownload(res)
        }).catch(() => {
          this.exportLoading = false
        })
      },
      /**
       * @description: 下载
       * @return {void}
       */    
      handleDownload(res){
        const blob = new Blob([res.data])
        // const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '重点监管质量风险监控计划信息.xlsx' // 获取文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放blob对象
      },
    chechEmoById(employeeId) {
      const list = this.organizePeopleList.filter(item => item.employeeId === employeeId)
      if (list.length) {
        return list[0].employeeName
      }
      return ''
    },
    //获取项目下的人员列表
    riskMonitorPlangetEmoById() {
      if (!this.form.projectId) return
      this.fetchingOrganizePeopleList = true
      riskMonitorPlangetEmoById(this.form.projectId).then((res) => {
        this.fetchingOrganizePeopleList = false
        let obj = {}
        res.data = res.data.reduce((cur, next) => {
          obj[next.employeeId] ? '' : (obj[next.employeeId] = true && cur.push(next))
          return cur
        }, []) //设置cur默认类型为数组，并且初始值为空的数组
        this.organizePeopleList = res.data.map(item => {
          item.value = item.employeeId
          item.label = item.employeeName
          return item
        })
      })
    },
    openRecordsDetail(record) {
      this.$router.push({
        name: 'qualityriskIdentificationmonitoringRecordsMonitoringInfo',
        query: {
          id: record.detailId, // 业务id
          sourceId: record.escalationId,
          editModel: '2', // 操作类型
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>